<template>
	<view :style="{height:systemInfo.statusBarHeight+'px',background:' #54e4ca'}">

	</view>
	<view class="header flex-between-center px-3">
		<view class="header-left color-fff font-weight-600 f-size-16">
			Activity
		</view>
		<view class="header-right flex-between-center">
			<image src="../../../static/image/dog.png" mode=""></image>
			<image src="../../../static/icon/down.png" mode="" @click="overLayShow=!overLayShow"></image>
			<SoverLay :style="{top:systemInfo.statusBarHeight+52+'px',opacity:overLayShow?1:0,zIndex:overLayShow?999:0}"></SoverLay>
		</view>
	</view>
</template>

<script setup>
	import SoverLay from './over-lay.vue';
	import {
		onMounted,
		ref
	} from 'vue'
	const overLayShow = ref(false)
	const systemInfo = ref({})
	onMounted(() => {

		systemInfo.value = uni.getSystemInfoSync()

	})
</script>

<style lang="scss" scoped>
	.header {
		width: 100vw;
		height: 60px;
		background-color: #54e4ca;
		box-sizing: border-box;

		.header-right {

			// position: relative;
			image {
				&:nth-of-type(1) {
					width: 70rpx;
					height: 70rpx;
				}

				&:nth-of-type(2) {
					width: 35rpx;
					height: 35rpx;
					margin-left: 20rpx;
				}
			}
		}
	}
</style>